import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text} from '@tarojs/components'
import CourseItem from '../CourseItem'
import DataMissingBody from "../DataMissingBody";
import {connect} from '@tarojs/redux'
import {bindActionCreators} from "redux";
import courseListActions from '../../actions/courseList'
import {AtSearchBar} from 'taro-ui';
import './index.scss'

class Body extends Component {

    constructor(props) {
        super(props)
        this.state = {
            value: ''
        }
        this.onchange = this.onchange.bind(this)
    }

    config = {
        navigationBarTitleText: '瑞金街道'
    }

    onchange(e) {
        this.setState({
            value: e.target.value
        })
    }

    render() {
        const {value} = this.state
        const onChange = this.onChange
        const {ids, byId} = this.props
        return (
            <View className='index-body'>
                {ids.length > 0 ?
                    <View>
                        <AtSearchBar value={value} onchange={onChange} actionName='搜一下'/>
                        <View className='filter-bar'>
                            <Button className='filter-button filter-button-all'>全部</Button>
                            <Button className='filter-button filter-button-monday'>周一</Button>
                            <Button className='filter-button filter-button-friday'>周五</Button>
                            <Button className='filter-button filter-button-past'>往期</Button>
                        </View>
                        <View className='list'>
                            {byId &&
                            ids &&
                            ids.map((id, index) =>
                                <CourseItem key={id} {...byId[id]} index={index}></CourseItem>
                            )}
                        </View>
                    </View>
                    : <DataMissingBody/>
                }
            </View>
        )
    }
}

const mapStateToProps = ({courseList}) => {
    return {
        byId: courseList.byId,
        ids: courseList.ids
    };
};

const mapDispatchToProps = () => {
    return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(Body)
